<template>
	<div class="indexBox">
			
			
		
		<div class="nowList">
			<el-card class="box-card" style="padding: 12px 18px; box-sizing: border-box;">
				<div>
					<el-button style="background-color:#7cb5ec;color: #FFF;" @click="goOzonizer">臭氧机</el-button>
				</div>
				<div class="itemBox">
					<div class="item" style="color: #7cb5ec;">
						<div class="name">氮氧化物</div>
						<div class="num">{{showItem.ds_nox}}</div>
					</div>
					<div class="item" style="color: #228B22;">
						<div class="name">五分钟变化率</div>
						<div class="num">{{showItem.changeRate_ds}}</div>
					</div>
					<div class="item" :style="showItem.ds_runningState ==='上升 ↑' ? 'color:#CC0000': showItem.ds_runningState === '下降 ↓' ?'color:#66FF33':'color:#3300FF' ">
						<div class="name">当前趋势</div>
						<div class="num" >{{ showItem.ds_runningState}}</div>
					</div>
				</div>
			</el-card>
		</div>
		<div class="chart">
			<myEhcarts @update-data="handleDataUpdate" />
		</div>
	</div>
</template>
<script setup lang="ts">
	import myEhcarts from '@/components/myEhcarts1.vue';
	import {
		ref,
		onMounted,
		onBeforeUnmount,
		getCurrentInstance,
		computed
	} from 'vue';
	import { useRouter } from 'vue-router';
	const router = useRouter();
	const showItem = ref({

	})
	
	const goOzonizer = (()=>{
		router.push('/ozonizer')
	})
	



	const handleDataUpdate = (data) => {
		data.changeRate = data.changeRate.toFixed(2)
		if (data.ds_runningState === 1) {
			data.ds_runningState = '上升 ↑'
		} else if (data.ds_runningState === 2) {
			data.ds_runningState = '下降 ↓'
		} else if (data.ds_runningState === 3) {
			data.ds_runningState = '平稳 --'
		}
		
		showItem.value = data
	};
</script>
<style lang="scss" scoped>
	.indexBox {
		padding: 24px;
		box-sizing: border-box;

		.nowList {
			margin-bottom: 20px;

			.itemBox {
				padding: 0 200px;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.item {
					text-align: center;

					.name {
						margin-bottom: 5px;
						font-size: 21px;
						font-weight: 600;
					}

					.num {
						font-size: 18px;
						font-weight: 600;
					}
				}
			}
		}

		.chart {}
	}
</style>